<GradientEditor
    themePresets="{themePresets}"
    bind:customize
    bind:colors
    label="{customize ? 'Edit gradient' : 'Select gradient'}"
>
</GradientEditor>
<hr />
<p style="margin-top: 7em; color: #888">this is how the colors are stored:</p>
<pre>{JSON.stringify(colors, null, 2)}</pre>

<script>
    import GradientEditor from '../GradientEditor.html';
    import { simpleTheme } from './lib/themeStore';

    export default {
        components: { GradientEditor },
        data() {
            return {
                customize: false,
                colors: []
            };
        },
        store: () => simpleTheme,
        helpers: {
            themePresets: [
                ['#f0f9e8', '#ccebc5', '#a8ddb5', '#7bccc4', '#43a2ca', '#0868ac'], // GnBu
                ['#fefaca', '#008b15'], // simple yellow to green
                ['#feebe2', '#fcc5c0', '#fa9fb5', '#f768a1', '#c51b8a', '#7a0177'], // RdPu
                ['#ffffcc', '#c7e9b4', '#7fcdbb', '#41b6c4', '#2c7fb8', '#253494'], // YlGnbu

                ['#8c510a', '#d8b365', '#f6e8c3', '#f5f7ea', '#c7eae5', '#5ab4ac', '#01665e'], // BrBG
                ['#c51b7d', '#e9a3c9', '#fde0ef', '#faf6ea', '#e6f5d0', '#a1d76a', '#4d9221'], // PiYG
                ['#b2182b', '#ef8a62', '#fddbc7', '#f8f6e9', '#d1e5f0', '#67a9cf', '#2166ac'] // RdBu
            ]
        }
    };
</script>
